import { WeaEchart } from 'ecCom';
import equals from 'deep-equal';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    const scrollheigth = this.getHeight();
    this.state = { pageHeight: scrollheigth };
  }

  componentWillMount() {

  }

  componentDidMount() {

  }

  componentDidUpdate() {
    if (this.refs.chart) this.refs.chart.paint();
  }

  getHeight() {
    return `${document.documentElement.clientHeight - 200}px`;
  }

  scrollheigth() {
    this.setState({ pageHeight: this.getHeight() });
    const flag = this.refs.hasOwnProperty('chart');
    if (flag) {
      this.refs.chart.chart.resize();
    }
  }

  render() {
    const { datas } = this.props;
    return (
      <div style={{ width: '100%', overflowX: 'hidden', height: this.state.pageHeight }}>
        <WeaEchart
          ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@kze6o8`}
          ref="chart"
          option={{
            visualMap: {
              min: 0,
              max: 100,
              left: 'left',
              top: 'bottom',
              text: [getLabel(27734, '高'), getLabel(19952, '低')],
              inRange: {
                color: ['#DCECFF', '#1556A1'],
              },
              calculable: true,
            },
            series: [
              {
                name: getLabel(31993, '中国'),
                type: 'map',
                mapType: 'china',
                selectedMode: 'single',
                label: {
                  normal: { show: true },
                  emphasis: { show: true },
                },
                data: datas,
              },
            ],
          }}
          useDefault={false}
          chartAction={this.chartAction}
          onStatusChange={(v) => {
            if (v === 'ready') {
              jQuery(window).resize(() => {
                this.scrollheigth();
              });
            }
          }}
        />
      </div>
    );
  }

    chartAction=(chart) => {
      const _this = this;
      chart.off('click');
      chart.on('click', (params) => {
        if (typeof params.data === 'object') {
          typeof _this.props.provinceClick === 'function' && _this.props.provinceClick(params.data.id);
        }
        return false;
      });
    }
}
